<template>
  <view class="content">
    <!-- <router-link to="/wordsSearch">Go to About</router-link> -->
    <!-- <view class="title">文字筛选</view> -->
    <view class="options">
      <button
        :type="wuxing == item.val ? 'primary' : 'default'"
        v-for="item in wuxingItems"
        :value="item.val"
        :key="item.val"
        @click="get(item.val)"
      >
        {{ item.name }}
      </button>
    <label><input type="checkbox" :value="shengpi"
  @change="shengpi = !shengpi;isAll($event)" />全部</label>
      <!-- <div>{{ shengpi }}</div>  -->
      <!-- <button
        class="btn"
        :class="shengpi ? 'primary' : 'default'"
        @click="isAll('all')"
      >
        全部
      </button> -->
      
      <button type="default" @click="update()">修改</button>
      <button type="default" @click="goLun()">阴历查询</button>
    </view>
<!-- <div>{{ showItems }}</div> -->
    <view class="content">
      <ul class="wordsUl btn-list">
        <li
          class="wordsList"
          v-for="(item, key) in showItems"
          :key="key"
          style="width: 100%"
        >
          <p style="margin: 10px 0">笔画{{ key }}:</p>

          <span
            :class="ele.shengpi ? 'shengpi' : ''"
            style="user-select: text"
            v-for="ele in item"
            :key="ele.zi"
          >
            <router-link
            
              :to="{ path: '/wordsSearch', query: { zi: ele.zi ,wuxing:wuxing} }"
              >{{ ele.zi }}</router-link
            >
          </span>
        </li>
      </ul>
    </view>
  </view>
</template>
<script setup>
import { getCurrentInstance, ref,reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router'
let { proxy } = getCurrentInstance()
console.log(proxy.$allWords);
const router = useRouter()
const route = useRoute()
let wuxing = ref('')
let shengpi = ref(false)
let wuxingItems = [
  { val: 'Jin', name: '金' },
  { val: 'Mu', name: '木' },
  { val: 'Shui', name: '水' },
  { val: 'Huo', name: '火' },
  { val: 'Tu', name: '土' },
]

let resultItems = {}
let allResultItems = {}
let showItems =reactive({})


function get(wx) {
  //console.log(wx)
  wuxing = wx

  if (!wuxing) {
    //uni.hideLoading()
    // uni.showModal({
    //   content: `请选择五行`,
    //   showCancel: false
    // })
    //return '请选择五行'
  }
  // console.log(worldsJin)
  let result
  result = proxy.$allWords['words'+wuxing]


  let arr = Object.values(result)
  let bihuaMap = {}
  let allMap = {}
  for (let i = 0; i < arr.length; i++) {
    if (!arr[i].shengpi) {
      if (bihuaMap[arr[i].fbihua]) {
        bihuaMap[arr[i].fbihua].push(arr[i])

      } else {
        bihuaMap[arr[i].fbihua] = [arr[i]]
      }
    }
    if (allMap[arr[i].fbihua]) {
      allMap[arr[i].fbihua].push(arr[i])

    } else {
      allMap[arr[i].fbihua] = [arr[i]]
    }
  }

  resultItems = bihuaMap
  allResultItems = allMap

  console.log(resultItems,allResultItems);
  isAll()
}
function cha() {

  // this.$router.push({
  // 	'path':'/wordsSearch'
  // })

  // uni.navigateTo({
  //   url: '/pages/wordsSearch/index',
  //   complete: function (res) {
  //     console.log(res)
  //   }
  // });
  //navigate('wordSearch')
}
function isAll(all) {

  // if (all == 'all') shengpi = !shengpi
  let data
  if (shengpi.value) {
    data = allResultItems
  } else {
    data = resultItems
  }
  for (const key in showItems) {
    delete showItems[key]
  }
  for (const key in data) {
    showItems[key] = data[key]
  }
  // console.log(showItems);
}
function update() {
  router.push({
  	'path':'/update'
  })
  // uni.navigateTo({
  //     url: '/pages/update/index',
  // 	complete:function(res){
  // 		console.log(res)
  // 	}
  // });
}
function goLun(){
  router.push({
  	'path':'/lunisolar'
  })
}
</script>


<style>
.content {
  padding-bottom: 30px;
}

.options {
  display: flex;
  margin: 10px 0;
}
.options button{
  margin-right: 8px;
  padding:4px;
}
.wordsUl {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.title {
  font-weight: bold;
  text-align: center;
  padding: 20px 0px;
  font-size: 20px;
}

.tips {
  color: #999999;
  font-size: 14px;
  padding: 20px 30px;
}

.btn-list {
  padding: 0px 30px;
}

.btn-list button {
  margin-bottom: 20px;
}

.upload-preview {
  width: 100%;
}

.wordsList span {
  padding: 5px;
  border-radius: 5px;
  display: inline-block;
}

.wordsList span.shengpi {
  background-color: #10aeff;
}

.wordsList a {
  text-decoration: none;
  color: black;
}
</style>
